
<div class="w-full space-y-2">
  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-stone-800/10 border-transparent text-stone-800">
    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message, with variant="ghost"</div>
  </div>
  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-transparent border-stone-800 text-stone-800">
    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message. with variant="outline"</div>
  </div>
  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-stone-800 border-stone-800 text-stone-50">
    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message. with variant="solid"</div>
  </div>
  <div role="alert" class="relative flex items-start w-full border rounded-md p-2 bg-gradient-to-tr from-primary-dark to-primary-light border-stone-800 text-stone-50">
    <div class="w-full text-sm font-sans leading-none m-1.5">A simple alert for showing message. with variant="gradient"</div>
  </div>
</div>
